<template>
	<view>
		<u-skeleton rows="5" :loading="pageLoading" :rowsHeight="50" :title="false">
			<view class="head-wrap">
				<view style="position: relative; z-index: 9">
					<u-navbar leftIconColor="#fff" :bgColor="navBgColor" :border-bottom="false" :placeholder="true">
						<view slot="left" class="nav-left">
							<view @click="onBackJump" class="head-nav-item">
								<u-icon name="arrow-left" color="#fff"></u-icon>
							</view>
						</view>
						<view slot="center" style="font-weight: bold" :style="[navTitleStyle]">
							{{ topicInfo.name.substring(0, 10) }}
						</view>
					</u-navbar>
				</view>
				<image class="bg-img" mode="aspectFill" :src="$utils.imgPath(topicInfo.bg_image)"></image>
				<view class="mask-bg"></view>
				<view class="head-content">
					<view class="topic-head">
						<image class="cover-img" mode="aspectFill" :src="$utils.imgPath(topicInfo.cover_image)"></image>
						<view class="name-wrap">
							<text class="name">{{ topicInfo.name }}</text>
							<text class="user">圈主 [{{ topicInfo.user.nickname || '无' }}]</text>
						</view>
						<view class="tool-menu-wrap">
							<navigator class="m-item" :url="'/pages/topic/setting?id=' + topicId">
								<u-icon name="/static/set.png" :size="18"></u-icon>
							</navigator>
							<navigator class="m-item" :url="'/pages/topic/qrcode?id=' + topicId">
								<u-icon name="/static/share_1.png" :size="18"></u-icon>
							</navigator>
						</view>
					</view>
					<navigator class="notice-txt" v-if="topicInfo.notice" :url="'../topic/notice?id=' + topicId">
						<view class="u-line-1">公告：{{ topicInfo.notice | replace }}</view>
						<view class="right-icon">
							<u-icon name="arrow-right" color="#fff"></u-icon>
						</view>
					</navigator>
					<view class="user-wrap">
						<text>
							<text style="margin-right: 10rpx">{{ topicInfo.user_num }}</text>
							圈友已加入
						</text>
						<navigator :url="'/pages/topic/user-list?id=' + topicId" class="right" hover-class="none">
							<u-avatar-group :urls="avatarUrls" size="20" gap="0.3" mode="aspectFill"></u-avatar-group>
							<u-icon name="arrow-right" color="#fff"></u-icon>
						</navigator>
					</view>
				</view>
			</view>
		</u-skeleton>
		<view class="content-main">
			<!-- 置顶 -->
			<view class="post-top-box" v-if="topicInfo.top_post && topicInfo.top_post.length > 0">
				<navigator @longpress="onTopDel(item, index)" class="post-item"
					:url="'/pages/post/detail?id=' + item.id" v-for="(item, index) in topicInfo.top_post" :key="index">
					<view class="tag">置顶</view>
					<view class="title u-line-1">{{ item.title || item.content.substring(0, 30) }}</view>
					<u-icon name="arrow-right" color="#000"></u-icon>
				</navigator>
			</view>
			<view v-else class="post-top-box"></view>
			<!-- 话题 -->
			<navigator :url="'/pages/discuss/detail?id=' + item.id" class="discuss-item"
				v-for="(item, index) in discussList" :key="index">
				<view class="icon">#</view>
				<view class="title u-line-1">{{ item.title }}</view>
			</navigator>
			<u-sticky :offset-top="tabSticky">
				<view style="background-color: #ffff">
					<!-- 分类tab -->
					<u-tabs :list="classList" lineColor="#000" :activeStyle="tabActiveStyle"
						:inactiveStyle="tabInactiveStyle" :is-scroll="false" :current="tabIndex"
						@change="tabsChange"></u-tabs>
				</view>
			</u-sticky>

			<q-post-list v-for="(calssItem, classIndex) in classList" :key="classIndex" v-show="classIndex == tabIndex"
				:list="calssItem.list" :loadStatus="loadStatus" :topic="topicInfo" :tips="listTips"></q-post-list>
		</view>
		<!-- 加入圈子弹窗 -->
		<u-modal :show="joinTopicModel" :show-cancel-button="true" @cancel="joinTopicModel = false" confirm-text="加入圈子"
			:content="'是否加入【' + topicInfo.name + '】?'" @confirm="joinTopic"></u-modal>

		<!-- 发布帖子按钮 -->
		<view v-if="topicInfo.id" @click="handelAdd('/pages/post/add')" class="plus-btn">
			<u-icon name="plus" color="#fff"></u-icon>
			<text class="text">发布动态</text>
		</view>

		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageLoading: true,
				showTopicPopup: false,
				joinTopicList: [],
				tabActiveStyle: {
					fontWeight: 'bold',
					fontSize: '35rpx'
				},
				tabInactiveStyle: {
					fontWeight: 'bold',
					fontSize: '30rpx'
				},
				showShare: false,
				joinTopicModel: false,
				tabIndex: 0,
				classList: [],
				topicInfo: {
					name: ''
				},
				postList: [],
				loadStatus: 'loading',
				page: 1,
				avatarUrls: [],
				classId: '',
				listTips: '',
				navBgColor: 'unset',
				navTitleStyle: {
					color: '#fff'
				},
				scrollTop: 0,
				topicId: null,
				discussList: []
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			if (e.scrollTop > 150) {
				this.navBgColor = '#fff';
				this.navTitleStyle = {
					color: '#616161'
				};
			} else {
				this.navBgColor = 'unset';
				this.navTitleStyle = {
					color: '#fff'
				};
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.user.userInfo;
			},
			tabSticky() {
				return this.$u.addUnit(this.$u.getPx(uni.$u.props.navbar.height) + this.$u.sys().statusBarHeight, 'px');
			}
		},
		onLoad(options) {
			if (options.scene) {
				this.topicId = options.scene;
			}

			if (options.topic_id) {
				this.topicId = options.topic_id;
			}

			this.getUserList();
			this.getTopicInfo();
			this.getDiscussData();
			this.updateOpenTopicTime();
		},
		onReachBottom() {
			this.classList[this.tabIndex].page++;
			if (this.topicInfo.is_goods && this.tabIndex == 1) {
				this.getGoodsList();
			} else {
				this.getPostList();
			}
		},
		onPullDownRefresh() {
			this.classList[this.tabIndex].page = 1;
			this.classList[this.tabIndex].list = [];

			if (this.topicInfo.is_goods && this.tabIndex == 1) {
				this.$refs['goodsWaterfall'].clear();
				this.getGoodsList();
			} else {
				this.getTopicInfo();
			}

			uni.stopPullDownRefresh();
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			return {
				title: this.topicInfo.name + '-' + this.topicInfo.description,
				path: '/pages/index/index?topic_id=' + this.topicId,
				imageUrl: this.topicInfo.bg_image
			};
		},
		onShareTimeline() {
			return {
				title: this.topicInfo.name + '-' + this.topicInfo.description,
				imageUrl: this.topicInfo.bg_image,
				query: 'topic_id=' + this.topicId
			};
		},
		filters: {
			substr: function(e) {
				return e.substr(0, 5);
			},
			replace(str) {
				if (str) {
					str = str.replace(/\n/g, '');
				}

				return str;
			}
		},
		methods: {
			getDiscussData() {
				this.$H
					.get('discuss/getListByTopicId', {
						topic_id: this.topicId
					})
					.then((res) => {
						this.discussList = res.result.list;
					});
			},
			updateOpenTopicTime() {
				this.$H.post('topic/updateOpenTime', {
					topic_id: this.topicId
				});
			},
			onTopicPopup() {
				this.showTopicPopup = false;
			},
			// 用户加入的圈子列表
			getUserJoinTopic() {
				this.$H.post('topic/currentUserJoinTopic').then((res) => {
					if (res.result.length > 0) {
						this.joinTopicList = res.result;
					}
				});
			},
			getTopicClass() {
				this.$H
					.get('topic/postClassList', {
						topic_id: this.topicId
					})
					.then((res) => {
						let classList = [{
							name: '推荐',
							page: 1,
							list: []
						}];

						//如果开启圈内好物
						if (this.topicInfo.is_goods === 1) {
							classList.push({
								name: this.topicInfo.goods_class_name,
								page: 1,
								list: []
							});
						}

						res.result.forEach((item) => {
							classList.push({
								...item,
								page: 1,
								list: []
							});
						});

						this.classList = classList;
						this.getPostList();
					});
			},
			getUserList() {
				this.$H
					.get('topic/userList', {
						page: this.page,
						id: this.topicId
					})
					.then((res) => {
						let userList = res.result.list;

						for (let index = 0; index < 2; index++) {
							this.avatarUrls.push(this.$utils.imgPath(userList[index].avatar));
						}
					});
			},
			onTopDel(e, index) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否解除置顶?',
					success: function(res) {
						if (res.confirm) {
							that.$H
								.post('post/topPostDel', {
									post_id: e.id,
									topic_id: e.topic_id
								})
								.then((res) => {
									if (res.code == 200) {
										that.topicInfo.top_post.splice(index, 1);
									}
								});
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			tabsChange(e) {
				let index = e.index;
				this.tabIndex = index;

				if (this.classList[index].list.length === 0) {
					if (index === 1 && this.topicInfo.is_goods) {
						this.getGoodsList();
					} else {
						this.classId = e.id;
						this.getPostList();
					}
				}
			},
			handelAdd(url) {
				if (this.userInfo.id) {
					if (this.topicInfo.is_join) {
						let params = {
							topic_id: this.topicId,
							class_id: this.topicInfo.class_id
						}

						uni.navigateTo({
							url: url + uni.$u.queryParams(params)
						});
					} else {
						this.joinTopicModel = true;
					}
				} else {
					this.$store.dispatch('mnpLogin');
				}
			},
			joinTopic() {
				this.$H
					.post('topic/joinTopic', {
						id: this.topicId
					})
					.then((res) => {
						if (res.code == 200) {
							this.topicInfo.is_join = true;
							this.joinTopicModel = false;
						}
					});
			},
			getTopicInfo() {
				this.$H
					.get('topic/detail', {
						id: this.topicId
					})
					.then((res) => {
						if (res.code == 200) {
							this.topicInfo = res.result;

							this.getTopicClass();
						}

						this.pageLoading = false;
					});
			},
			getGoodsList() {
				this.loadStatus = 'loading';
				let page = this.classList[this.tabIndex].page;
				this.$H
					.post('goods/getListByPage', {
						page,
						topic_id: this.topicId
					})
					.then((res) => {
						if (res.code == 200) {
							this.classList[this.tabIndex].list = res.result.list;

							if (res.result.hasMorePages) {
								this.loadStatus = 'loadmore';
							} else {
								this.loadStatus = 'nomore';
							}
						}
					});
			},
			getPostList() {
				this.loadStatus = 'loading';
				let page = this.classList[this.tabIndex].page;

				this.$H
					.get('post/getListByPage', {
						page,
						topic_id: this.topicId,
						class_id: this.classId
					})
					.then((res) => {
						if (res.code == 200) {
							this.classList[this.tabIndex].list = this.classList[this.tabIndex].list.concat(res.result
								.list);

						if (res.result.hasMorePages) {
							this.loadStatus = 'loadmore';
						} else {
							this.loadStatus = 'nomore';
						}
						} else {
							this.loadStatus = 'nomore';
							this.listTips = '圈子不存在或已关闭';
						}
					});
			},
			onBackJump() {
				const pages = getCurrentPages();
				if (pages.length > 1) {
					uni.navigateBack();
				} else if (pages.length === 1) {
					uni.switchTab({
						url: '/pages/index/index'
					});
				}
			}
		}
	};
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.head-wrap {
		height: 620rpx;
		position: relative;

		.bg-img {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
		}

		.mask-bg {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9));
		}

		.head-content {
			position: relative;
			color: #eee;
			padding: 20rpx;

			.topic-head {
				display: flex;
				margin-bottom: 30rpx;

				.cover-img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

				.name-wrap {
					flex: 1;
					display: flex;
					flex-direction: column;

					.name {
						font-size: 32rpx;
						font-weight: bold;
					}

					.user {
						font-size: 24rpx;
						color: #999;
					}
				}
			}

			.notice-txt {
				display: flex;
				margin-bottom: 30rpx;
				font-size: 28rpx;

				.right-icon {
					margin-left: auto;
				}
			}

			.user-wrap {
				display: flex;
				align-self: center;
				margin-bottom: 30rpx;

				.right {
					margin-left: auto;
					display: flex;
					align-self: center;
				}
			}
		}
	}

	.content-main {
		background-color: #fff;
		position: absolute;
		width: 100%;
		top: 480rpx;
		min-height: 80vh;
		border-radius: 30rpx;
	}

	// 置顶
	.post-top-box {
		background-color: #fff;
		padding: 20rpx 20rpx 0 20rpx;
		border-radius: 20rpx 20rpx 0 0;

		.post-item {
			display: flex;
			align-items: center;
			padding-bottom: 20rpx;
			font-size: 28rpx;
			font-weight: bold;

			.title {
				flex: 1;
			}

			&:last-child {
				margin-bottom: 0;
			}

			.tag {
				background-color: $themes-color;
				color: #fff;
				padding: 0 10rpx;
				border-radius: 10rpx;
				font-size: 20rpx;
				height: 40rpx;
				line-height: 40rpx;
				margin-right: 20rpx;
			}
		}
	}

	// 分享类型弹窗
	.share-type {
		padding: 50rpx 30rpx;

		.type-item {
			background-color: #f5f5f5;
			padding: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}

			&:nth-child(2) {
				margin: 20rpx 0;
			}
		}
	}

	// 发布弹窗
	.post-add-popup {
		display: flex;
		padding: 50rpx 0;

		.p-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			flex: 1;
			padding: 20rpx 0;
			border-radius: 20rpx;

			.icon {
				width: 100rpx;
				margin-bottom: 20rpx;
			}

			.txt {
				font-size: 28rpx;
			}
		}
	}

	.handle-close {
		display: flex;
		justify-content: center;
		margin-bottom: 50rpx;
	}

	.tool-menu-wrap {
		.m-item {
			display: inline-block;
			padding: 15rpx;
			background-color: $themes-color;
			margin-left: 20rpx;
			border-radius: 50%;
		}
	}

	.plus-btn {
		position: fixed;
		bottom: 50rpx;
		background-color: $themes-color;
		display: flex;
		align-self: center;
		justify-content: center;
		border-radius: 100rpx;
		line-height: 1;
		padding: 20rpx 40rpx;
		margin-left: 38%;
		font-size: 28rpx;
		color: #fff;

		.text {
			margin-left: 10rpx;
		}
	}

	.topic-popup-wrap {
		padding-top: 50rpx;
		max-height: 70vh;
		overflow-y: auto;
	}

	.nav-left {
		display: flex;

		.head-nav-item {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgba(0, 0, 0, 0.2);
			padding: 10rpx 30rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;

			.nav-icon {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.ai-avatar-wrap {
		padding: 30rpx;
		text-align: center;
		background-color: #ccf5ff;
		margin: 20rpx;
		border-radius: 100rpx;
		font-weight: bold;
		color: #00b8e6;
		font-size: 32rpx;
	}

	.discuss-item {
		margin: 0 20rpx 20rpx 20rpx;
		font-weight: bold;
		background-color: #f5f5f5;
		padding: 10rpx;
		border-radius: 20rpx;
		display: flex;

		.icon {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #000;
			color: #fff;
			border-radius: 0 20rpx 0 20rpx;
			padding: 10rpx 20rpx;
			line-height: 1;
			margin-right: 20rpx;
			font-size: 28rpx;
		}
	}
</style>